// 点击小图标显示或者隐藏购物车页面
i1.onclick=function(){
    gouwu.style.display=gouwu.style.display=="block"?"none":"block";
}
let uls=document.querySelectorAll("#gouwu>div>div>ul");
let imgs=document.querySelectorAll("#main>div>div>div>img");
let spans=document.querySelectorAll("#gouwu>div>div>ul>li>.num");
// 选择页面所有图片绑定点击事件
imgs.forEach((img,i)=>{
    img.onclick=function(){
        // 每次点击选择页面图片相对应的购物车内的数量就+1
        if(spans[i].innerText==0){
            spans[i].innerText=parseInt(spans[i].innerText)+1;
            spans[i].parentNode.nextElementSibling.innerText=spans[i].innerText*spans[i].parentNode.previousElementSibling.innerText;
        }else{
            let zhe=spans[i];
            calcS(1,zhe);
        }
        hide(i); 
        red();
        calcZ()
    }
})
// 当任何商品数量大于0时，显示这件商品在购物车内；否者不显示
function hide(i){
    if(spans[i].innerText>0){
        uls[i+1].style.display="flex";
    }else{
        uls[i+1].style.display="none";
    }
}

let h3=mai.querySelector("h3");
// 所有商品数量相加，大于0时，购物车显示购买了几件商品
function red(){
    let num=0;
    spans.forEach(span=>{
        num+=parseInt(span.innerText);
    })
    if(num>0){
        h3.innerText=num;
        h3.style.display="block";
    }else{
        h3.innerText=0;
        h3.style.display="none";
    }
}
// 购物车内部代码
let icons=gouwu.querySelectorAll(".btn");
icons.forEach(val=>{
    val.onclick=function(){
        if(this.className=="iconfont btn jian"){
            let zhe=this.nextElementSibling;
            calcS(-1,zhe);
            calcZ();
        }else{
            let zhe=this.previousElementSibling;
            calcS(1,zhe);
            calcZ();
        }
    }
})
// 计算商品数量的函数和商品小计的函数
function calcS(num,zhe){
    let numx=0;
    if(num){
        numx=parseInt(zhe.innerText)+num;
        numx>0&&(zhe.innerText=numx);
    }else{
        console.log(1)
    }
    let xj=zhe.parentNode.nextElementSibling;
    let dj=zhe.parentNode.previousElementSibling;
    xj.innerText=zhe.innerText*dj.innerText;
}
// 计算总价的函数
function calcZ(){
    let xjs=document.querySelectorAll(".xiaoji");
    let numx=0;
    xjs.forEach(xj=>{
        xj.innerText!=""&&(numx+=parseInt(xj.innerText));
    })
    zongjia.innerText=numx;
}

// 删除一行商品操作按钮
let XX=document.querySelectorAll(".XX");
XX.forEach(x=>{
    x.onclick=function(){
        this.parentNode.parentNode.style.display="none";
    }
})
// 结账和清空购物车
let jiez=document.querySelector(".jiezhang");
let qingk=document.querySelector(".qingkong");
qingk.onclick=function(){
    spans.forEach((span,i)=>{
        span.innerText=0;
        uls[i].style.display="none";
    })
    red();
    zongjia.innerText="";
}
jiez.onclick=function(){
    let img=document.createElement("img");
    img.style.top="0";
    img.style.bottom="0";
    img.style.left="0";
    img.style.right="0";
    img.style.margin="auto";
    img.style.position="fixed";
    img.onclick=function(){
        this.remove();
    }
    if(zhifb.style.border=="1px solid rgb(134, 105, 97)"){
        img.src="../images/22 (1).png"
    }else if(weix.style.border=="1px solid rgb(134, 105, 97)"){
        img.src="../images/22 (2).png"
    }else{
        let h5=document.createElement("h5");
        h5.innerHTML="请选择支付方式";
        h5.style.top="0";
        h5.style.bottom="0";
        h5.style.left="0";
        h5.style.right="0";
        h5.style.margin="auto";
        h5.style.position="fixed";
        h5.style.width="250px";
        h5.style.height="50px";
        h5.style.fontSize="30px";
        h5.onclick=function(){
            this.remove();
        }
        gouwu.appendChild(h5);
    }
    gouwu.appendChild(img);
}
weix.onclick=function(){
    this.style.border="1px solid #866961";
    zhifb.style.border="1px solid #fff";
}
zhifb.onclick=function(){
    this.style.border="1px solid #866961";
    weix.style.border="1px solid #fff";
}


